<!-- 开发部：配套完成采集  蹇泽阳 -->
<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
    <div class="mt10" style="width: 100%; background-color: white">
      <el-card shadow="never" :body-style="{ padding: '10px 10px 0' }" class="mt10">
        <div slot="header" class="f16">
          <span style="font-weight: 600" class="mr55">扫描下单条码</span>
        </div>
        <div class="flex mt10 f14" style="align-items: center; justify-content: space-between">
          <div class="">PS:扫描指令单标签时，请确认光标置于此栏位</div>
          <div class="">
            <span class="mr10">扫描条码</span>
            <el-input @keydown="(event:any) => handleKeyDown(event)" v-model="scanCode" style="width: 414px; height: 25px; font-size: 20px" />
          </div>
          <div class="flex AIC">
            <span class="mr10">扫描信息</span>
            <div :class="flagBC === '0' ? '' : flagBC === '1' ? 'susses' : 'error'" style="width: 250px; height: 25px; border: 1px solid black">
              {{ scanMessage }}
            </div>
          </div>
        </div>
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <h1 class="f16">配套采集扫描记录</h1>
        <Table
          :isLoading="isLoading"
          :tableHeader="tableHeader"
          :tableData="tableData"
          selection
          class="mt10"
          :outTableHeight="160"
          @selectList="selectTable4List"
          :summaryData="summaryData"
          @confirmChange="confirmChange"
          summary
        />
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '0px 5px 5px' }">
        <PageModule :PageData="{ total: total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
import service from '@/utils/request'
import { debounce } from 'lodash'
import { onMounted, watch } from 'vue'
import LoginWork from '@/utils/LoginWork'
import type { formListType } from '@/components/Find/index.vue'
import { AcquisitionModel, selectList } from '@/plugins/mixin'
import fileRequest from '@/utils/fileRequest'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'CompleteTheMatching'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const scanCode = ref('')
const flagBC = ref('0')
const scanMessage = ref('')

const handleKeyDown = async (e: any) => {
  if (e.key === 'Enter' || e.keyCode === 13) {
    const res = (await LoginWork.post(`/pack/scanCollectAll?choose=${8}`, {
      lotNo: scanCode.value.toUpperCase()
      // prodType: radio.value
    })) as any
    if (res.code === 200) {
      JMessage.success('扫描成功')
      getTableList()
      const tempCode = JSON.parse(JSON.stringify(scanCode.value))
      scanCode.value = ''
      flagBC.value = '1'
      scanMessage.value = tempCode
    } else {
      JMessage.error(res.message)
      flagBC.value = '2'
      scanMessage.value = res.message
    }
  }
}

watch(
  scanCode,
  debounce(async (val) => {
    if (!scanCode.value) return
    const res = (await LoginWork.post(`/pack/scanCollectAll?choose=${8}`, {
      lotNo: scanCode.value.toUpperCase()
      // prodType: radio.value
    })) as any
    if (res.code === 200) {
      JMessage.success('扫描成功')
      getTableList()
      scanCode.value = ''
    } else {
      JMessage.error(res.message)
    }
  }, 500)
)
const imgList = ref([])
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令号',
    inputValue: ''
  },
  {
    type: 'select',
    selectP: '品牌',
    selectValue: '',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '请输入货号',
    inputValue: ''
  },
  {
    type: 'date',
    dateLabel: '客户交期',
    dateValue: ''
  },
  {
    type: 'select',
    selectP: '采集员',
    selectValue: '',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'date',
    dateLabel: '完成日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空'
  },
  {
    type: 'button',
    checkboxLabel: '删除扫描记录'
  },
  {
    type: 'button',
    checkboxLabel: '查询所有采集信息'
  },
  {
    type: 'button',
    checkboxLabel: '导出日报表'
  }
])

const tableHeader = ref([
  {
    label: '指令号',
    prop: 'lotNo'
  },
  {
    label: '品牌',
    prop: 'brand',
    width: 50
  },
  {
    label: '货号',
    prop: 'style'
  },
  {
    label: '颜色',
    prop: 'color'
  },
  {
    label: '号码',
    prop: 'sizeNo',
    width: 50
  },
  {
    label: '订单数量',
    prop: 'orderQty',
    width: 70
  },
  {
    label: '生产数量',
    prop: 'prodQty',
    width: 70
  },
  {
    label: '客户交期',
    prop: 'deliveryDate'
  },
  {
    label: '采集员',
    prop: 'prodUserName',
    width: 70
  },
  {
    label: '扫描时间',
    prop: 'prodDate'
  },
  {
    type: 'img',
    label: '图片',
    prop: 'photoPath',
    srcList: imgList
  }
])
tableHeader.value.forEach((item: any) => {
  if (item.label === '生产数量' || item.label === '派工数量') {
    item.change = false
  } else {
    item.change = 'Y'
  }
})
// 表一模块
// 表一按钮
const findClicked = async (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '删除扫描记录') {
    if (selectTableLists.value.length === 0) {
      JMessage.warning('请选择要删除的记录')
      return
    }
    const res = await LoginWork.post<any, any>(`/pack/collect/deleteCollectAll?choose=${8}`, selectTableLists.value)
    if (res.code === 200) {
      JMessage.success('删除成功')
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
  if (content === '查询所有采集信息') {
    getTableList(2)
  }
  if (content === '导出日报表') {
    if (
      !formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '完成日期')
        ?.dateValue?.[1] ||
      !formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '完成日期')
        ?.dateValue?.[0]
    ) {
      JMessage.error('请输入完成日期')
      return
    }
    const res = (await fileRequest.post('/pack/collect/downloadCollection', {
      // 选择类型
      choose: '8',
      // 完成日期结束时间
      completeEndTime:
        formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '完成日期')
          ?.dateValue?.[1] || '',
      // 完成日期开始时间
      completeStartTime:
        formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '完成日期')
          ?.dateValue?.[0] || '',
      // 客户交期结束时间
      deliveryEndTime:
        formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '客户交期')
          ?.dateValue?.[1] || '',
      // 客户交期开始时间
      deliveryStartTime:
        formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '客户交期')
          ?.dateValue?.[0] || '',
      // 指令号
      lotNo: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入指令号'
      )?.inputValue,
      // 采集类型 1:正单 2：补单 含有 试板/大货的传入试板/大货
      prodStep: '',
      // 采集员
      prodUserName: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '采集员')
        ?.selectValue,
      // 货号
      style: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入货号'
      )?.inputValue,
      // 生产员工
      workerUser: '',
      // 品牌
      brand: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '品牌')
        ?.selectValue,
      // 当前页码
      pageNum: currentPage.value,
      // 每页数量
      pageSize: pageSize.value
    })) as any
    const link = document.createElement('a') // 利用a标签自定义下载文件名
    let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
    link.style.display = 'none'
    //设置连接
    link.href = window.URL.createObjectURL(blob)
    const FileName = decodeURI(res.headers['content-disposition'].split(`utf-8''`)[1])
    link.download = FileName //自定义文件名字
    document.body.appendChild(link)
    //模拟点击事件
    link.click()
    document.body.removeChild(link)
  }
}

const tableData = ref([])
const isLoading = ref(true)
// 总计
interface summaryDataType {
  index: number
  num: number | undefined
}
const summaryData = ref<summaryDataType[]>([
  {
    index: 7,
    num: 0
  }
])
// 分页器
const currentPage = ref(1)
// 定义每页显示数量
const pageSize = ref(40)
// 定义总数量
const total = ref(0)
// 定义每页显示数量改变事件
const handleSizeChange = (val: number) => {
  // 将参数赋值给pageSize
  pageSize.value = val
  // 调用获取表格列表函数
  getTableList()
}
// 定义当前页改变事件
const handleCurrentChange = (val: number) => {
  // 将参数赋值给currentPage
  currentPage.value = val
  // 调用获取表格列表函数
  getTableList()
}

// 获取表数据
const getTableList = debounce(async (type = 1) => {
  // 设置加载状态为true
  isLoading.value = true
  // 调用接口获取数据
  let tableDataList = await service.post<any, any>(`/pack/collect/collectAllList?flag=${type}`, {
    // 选择类型
    choose: '8',
    // 完成日期结束时间
    completeEndTime: formList.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '完成日期'
    )?.dateValue?.[1],
    // 完成日期开始时间
    completeStartTime: formList.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '完成日期'
    )?.dateValue?.[0],
    // 客户交期结束时间
    deliveryEndTime: formList.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '客户交期'
    )?.dateValue?.[1],
    // 客户交期开始时间
    deliveryStartTime: formList.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '客户交期'
    )?.dateValue?.[0],
    // 指令号
    lotNo: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入指令号'
    )?.inputValue,
    // 采集类型 1:正单 2：补单 含有 试板/大货的传入试板/大货
    prodStep: '',
    // 采集员
    prodUserName: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '采集员')
      ?.selectValue,
    // 货号
    style: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入货号'
    )?.inputValue,
    // 生产员工
    workerUser: '',
    // 品牌
    brand: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '品牌')
      ?.selectValue,
    // 当前页码
    pageNum: currentPage.value,
    // 每页数量
    pageSize: pageSize.value
  })
  // 设置加载状态为false
  isLoading.value = false
  // 设置图片列表
  imgList.value = tableDataList.list.map((item: any) => {
    return item.photoPath
  })

  // 设置表格数据
  tableData.value = tableDataList.list.map((item: any) => {
    // 设置交期日期
    item.deliveryDate = item.deliveryDate.split(' ')[0]
    item.change = true
    return item
  })
  // 设置总数量
  total.value = tableDataList.total
  // 设置汇总数据
  summaryData.value[0].num = tableDataList.prodTotal
}, 500)
// 挂载时调用
onMounted(() => {
  getTableList()
})
// 监听表单数据变化时调用
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)

const getSelectList = async () => {
  await selectList(formList, () => service.get('/pcOrder/getPcOrderDataRsjCondition'))
  AcquisitionModel(8, formList)
}
// 当组件挂载完成时，调用getSelectList函数
onMounted(() => {
  getSelectList()
})

const selectTableLists = ref([])
// 定义一个函数，用于接收一个参数selectedList，并将参数selectedList的值赋值给selectTable4Lists的值
const selectTable4List = (selectedList: any) => {
  selectTableLists.value = selectedList
}

const confirmChange = async (row: any) => {
  const res = (await LoginWork.post('/pack/updatePcOrderStatus', row)) as any
  if (res.code === 200) {
    JMessage.success('修改成功')
  } else {
    JMessage.error(res.message)
    getTableList()
  }
}
</script>

<style lang="less" scoped>
.susses {
  background-color: rgb(71, 232, 71);
  text-align: center;
  line-height: 25px;
  font-size: 20px;
}
.error {
  background-color: #ff0000;
  font-size: 20px;
  text-align: center;
}
</style>
